<template>
	<view class="news">
		<view class="news-swiper">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :circular="true">
				<swiper-item v-for="(data,index) in bannerList" :key="index">
					<image :src="data.image" mode="aspectFill" @click="goUrl(data.link)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="news-main">
			<view :class="['news-tabs',{'fixed': fixed}]" ref="tabs">
				<tabs :list="tabs" v-model="active" itemColor="#333" lineColor="#2073F5" @input="select"></tabs>
			</view>
			<view :class="['news-list weixinNothing',{'paddingTop': fixed}]">
				<block v-if="newsList.length">
					<view class="news-item" v-for="(data,index) in newsList" :key="index" @click="goNewsInfo(data.information_id,data.type,data.url,data.name)">
						<view class="news-item-info">
							<view class="news-item-tit">{{data.name}}</view>
							<view class="news-item-time">
								<text v-if="data.class_id==1">#资讯</text>
								<text v-if="data.class_id==2">#教程</text>
								<text v-if="data.class_id==3">#视频</text>
								<text>{{data.add_time}}</text>
							</view>
						</view>
						<image :src="data.image" mode="aspectFill"></image>
					</view>
				</block>
				<block v-else>
					<nothing :text="'暂无数据'" :btn="false"></nothing>
				</block>
			</view>
		</view>
		<loading :text="'加载中'" v-if="loading"></loading>
		<no-more :text="'数据加载完毕'" v-if="newsList.length && noMore"></no-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				fixed: false,
				offsetTop: '',
				loading: false,
				noMore: false,
				page: 0,
				bannerList: [],
				newsList: [],
				tabs: [{
					title: '全部'
				},{
					title: '资讯'
				},{
					title: '教程'
				},{
					title: '视频'
				}],
				Refresh: false
			}
		},
		onLoad(){
			this.init()
			this.getBanner()
		},
		mounted(){
			let _this = this
			const query = uni.createSelectorQuery().in(this)
			query.select('.news-tabs').boundingClientRect(res => {
				_this.offsetTop = res.top
			}).exec();
		},
		methods: {
			getBanner(){
				this.$api.slideshow_list({client: 5,is_online: 1}).then(res => {
					this.bannerList = res.datas
				})
			},
			init(page){
				let data = {
					class_id: this.active?this.active:'',
					limit: 10,
					page: page?page:0,
					status: 1
				}
				this.$api.informationList(data).then(res => {
					let _this = this
					if(this.Refresh){
						uni.stopPullDownRefresh({
							success(){
								_this.Refresh = false
								uni.showToast({
									icon: 'none',
									title: '刷新成功',
									duration: 1500
								})
							}
						})
					}
					this.loading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							this.newsList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			select(e){
				this.loading = false
				this.noMore = false
				this.newsList = []
				this.page = 0
				this.init(this.page)
			},
			onPageScroll(e){
				if(e.scrollTop >= this.offsetTop){
					this.fixed = true
				}else{
					this.fixed = false
				}
			},
			onPullDownRefresh() {
				this.Refresh = true
				this.newsList = []
				this.init(0)
			},
			onReachBottom(){
				if(this.loading) return;
				if(!this.noMore){
					this.loading = !this.loading
					this.page++
					this.init(this.page)
				}
			},
			goNewsInfo(id,type,url,title){
				if(url){
					// #ifdef H5
						window.location.href = url
						return false
					// #endif
					let lastUrl = url + '&title='+ title
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + encodeURIComponent(lastUrl)
					})
				}else{
					uni.navigateTo({
						url: '/pages/news/news-info?id=' + id
					})
				}
			},
			goUrl(url){
				if(url.indexOf('http') < 0 || url.indexOf('https') < 0){
					return false
				}
				// #ifdef H5
					window.location.href = url
					return false
				// #endif
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + encodeURIComponent(url)
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../static/scss/news.scss';
	/deep/ .weixinNothing{
		.nothing-tips{
			position: relative;
			left: 0;
			top: 0;
			transform: translate(0);
			margin-bottom: 0;
			margin-top: 50rpx;
			.nothing-tips-txt{
				margin-bottom: 0;
			}
		}
	}
</style>